<style include="cr-shared-style diagnostics-shared diagnostics-fonts">
  :host {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  page-toolbar {
    min-height: 56px;
    position: sticky;
    top: 0;
  }

  #download-icon {
    --iron-icon-fill-color: currentColor;
    height: 20px;
    margin-inline-end: 8px;
    width: 20px;
  }

  .session-log-button {
    border-radius: 16px;
    height: 32px;
    margin-inline: 16px;
  }

  .session-log-button:not([disabled]) {
    color: var(--cros-text-color-prominent);
  }

  .session-log-button[disabled] {
    color: var(--cros-text-color-disabled);
  }

  #toast {
   bottom: 0;
   left: 0;
  }
</style>
<div id="diagnosticsAppContainer">
  <div hidden$="[[!showNavPanel_]]">
    <navigation-view-panel id="navigationPanel" show-tool-bar
        title="[[i18n('diagnosticsTitle')]]"
        show-banner=[[bannerMessage_.length]]>
      <diagnostics-sticky-banner slot="banner"
          banner-message="{{bannerMessage_}}">
      </diagnostics-sticky-banner>
      <div slot="bottom-nav-content-panel" class="session-log-container">
        <cr-button on-click="onSessionLogClick_" class="session-log-button"
            disabled="[[!saveSessionLogEnabled_]]" hidden="[[!isLoggedIn_]]">
          <iron-icon icon="diagnostics:download" id="download-icon"></iron-icon>
          <span>[[i18n('sessionLog')]]</span>
        </cr-button>
      </div>
      <div slot="bottom-nav-content-drawer" class="session-log-container">
        <cr-button on-click="onSessionLogClick_" class="session-log-button"
            disabled="[[!saveSessionLogEnabled_]]" hidden="[[!isLoggedIn_]]">
          <iron-icon icon="diagnostics:download" id="download-icon"></iron-icon>
          <span>[[i18n('sessionLog')]]</span>
        </cr-button>
      </div>
    </navigation-view-panel>
  </div>
  <system-page hidden$="[[showNavPanel_]]"></system-page>
  <cr-toast id="toast" duration="2500">
    <span>[[toastText_]]</span>
  </cr-toast>
</div>
